import { PageProps } from "@/interfaces/app.interface"
import React, { useEffect, useCallback, useState, useRef, MouseEvent } from "react"
import Head from '../components/head'
import Foot from '../components/foot'
import style from "./index.less"
import 'swiper/css/swiper.css'
import Swiper from 'react-id-swiper';
import { prefix } from '@/utils/constant'
import { getBanner, getProcess, getInfo, getVideo, getImg, getNew, getPartner, getMenu, getDefault } from '@/api'


const IndexPage = (props: PageProps) => {

    let [step, setStep] = useState(0)
    let [banner, setBanner] = useState([])
    let [process, setProcess] = useState([])
    let [pimg, setPimg] = useState('')
    let [page, setPage] = useState(0)
    let [video, setVideo] = useState([])
    let [img, setImg] = useState([])
    let [news, setNew] = useState([])
    let [partner, setPartner] = useState([])
    let [info, setInfo] = useState<obj>({})
    let [mask, setMask] = useState('')
    let [per, setPer] = useState([])
    let id = props.location.query.i as string 
    const link = useCallback((url: string) => () => {
        if (id) {
            if (url.indexOf('?') > -1) {
                props.history.push(url + '&i=' + id)
            } else {
                open(url + '?i=' + id)
            }
        } else {
            if (url.indexOf('?') > -1) {
                props.history.push(url)
            } else {
                open(url)
            }
        }
        
    }, [])
    const openPage = useCallback(() => {
        open('/model/detail.html')
        // if (id) {
        //     open(location.origin + '/model.html?i='+id)
        // } else {
        //     open(location.origin + '/model.html')
        // }
    }, [])
    const params = {
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        // navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev',
        // },
        observer: true,
        loop: true,
        autoplay: true
    }

    const tab = (index: number) => () => {
        setStep(index)
        if (process[index].image) {
            setPimg(prefix + process[index].image)
        }
    }

    const showVideo = (url: string) => () => {
        setMask(prefix + url)
    }

    const changePage = (index: number) => () => {
        if (index > 0) {
            if (page < Math.ceil(process.length / 6) - 1) {
                setPage(page + 1)
            }
        } else {
            if (page > 0) {
                setPage(page - 1)
            }
        }
    }

    const blink = useCallback((url: string) => () => {
        if (url) open(url)
    }, [])
    
    useEffect(() => {
        if (!id) {
            getDefault().then(getData)
        } else {
            getData(id)
        }
    }, [])

    const getData = useCallback(
        (exhibitionId: string) => {
            let json = {exhibitionId}
            getMenu(json).then(res => {
                // console.log(res)
                setPer(res)
                if (res[0].isDel === 0) {
                    getBanner(json).then(setBanner)
                }
                if (res[1].isDel === 0) {
                    getVideo({ exhibitionId, pageSize: 3 }).then(res => {
                        setVideo(res.entities)
                    })
                }
                if (res[2].isDel === 0) {
                    getProcess(json).then(res => {
                        setProcess(res)
                        if (res[0]) {
                            setPimg(prefix + res[0].image)
                        }
                    })
                    getInfo({ id: exhibitionId }).then(setInfo)
                }
                if (res[3].isDel === 0) {
                    let Mudu = window.Mudu
                    Mudu.Init(
                        // 频道id
                        528778,
                        // 初始化完成的回调函数，无参数
                        function () {
                            console.log('Mudu Web Sdk 初始化成功')
                            var isChannelLiving = !!Mudu.Room.GetLiveStatus() // Mudu.Room.GetLiveStatus() 获取当前的直播状态 类型为number: `1`为正在直播，`0`为不在直播 
                            new Mudu.Player(
                                {
                                    // 必须，播放器容器ID，播放器会被添加到该DOM元素中
                                    containerId: 'video',
                                    // 非必需 boolean 控制播放器的ui展示, 默认为false; 根据播放视频的实际情况填写
                                    isLive: isChannelLiving,
                                    // 必须，播放器视频播放地址
                                    src: Mudu.Room.GetTrailer().m3u8,
                                    // 非必须，播放器海报图 string
                                    image: Mudu.Room.GetLiveImage(),
                                    // 已废弃该参数，请勿使用
                                    type: 'live',
                                    // 非必须，播放器是否自动播放，默认false
                                    autoplay: false,
                                    // 非必须，播放器是否显示控制条，默认true
                                    controls: true,
                                    // 非必须，播放器是否循环播放, 默认false
                                    repeat: false,
                                    // 非必须，播放器宽度，单位为像素，默认为480
                                    width: 1200,
                                    // 非必须，播放器高度，单位为像素，默认为270
                                    height: 680,
    
                                    // 以下x5Layer和x5Inline两个参数用于解决安卓微信、QQ、QQ浏览器的只能全屏播放的问题。参数仅对安装过tbs(腾讯浏览服务，一般安装过QQ浏览器后手机上会存在)手机生效(由于tbs的api限制，部分低版本的微信、QQ、QQ浏览器可能不会生效)，未安装tbs的安卓手机不会有只能全屏播放的问题。
                                    // x5Layer和x5Inline只能有一个被设置为true
    
                                    // 非必须，播放器在安卓微信、QQ、QQ浏览器中是否同层播放, 默认false  （注：同层播放时，页面document无法滚动(内部的dom元素可以)，如果播放器宽度小于浏览器宽度，两边将出现黑边）
                                    x5Layer: false,
                                    // 非必须，播放器在安卓微信、QQ、QQ浏览器中是否inline播放，默认false  （注：inline播放时，播放器始终处于z-index的最上层，因此无法在播放器上叠加元素）
                                    x5Inline: false,
                                    // 非必须 isLive为false时展示在时间进度条上的高亮点，hover时可展示text字段内容 （视频为回看视频时，会默认添加高亮信息，设置为[]可覆盖）
                                    highlights: [{
                                        time: 1, // int,
                                        text: '大会开始' // string
                                    }]
                                }
                            );
    
                        }
                    )
                }
                if (res[4].isDel === 0) {
                    getImg({ exhibitionId, pageSize: 6 }).then(res => {
                        setImg(res.entities)
                    })
                }
    
                if (res[5].isDel === 0) {
                    getNew({ exhibitionId, pageSize: 4 }).then(res => {
                        setNew(res.entities)
                    })
                }
    
                if (res[6].isDel === 0) {
                    getPartner(json).then(setPartner)
                }
    
            })
        },
        [],
    )

    return <>
        <Head status={0} per={per} id={id}/>
        {
            banner.length ?
                <Swiper {...params}>
                    {
                        banner.map(item => {
                            return <div key={item.id} className={style.swiper} onClick={blink(item.url)}>
                                <img src={prefix + item.image} alt="" />
                            </div>
                        })
                    }
                </Swiper> : null
        }
        { per.length && per[7].isDel == 0 ?
            <div className="wrap">
                <div className={style.h2}><span>大华线上云展</span></div>
                <div className={`flex ${style.yun}`}>
                    <img src={require('@/assets/img/yun2.png')} alt="" />
                    <div className={style.cont}>
                        <div className={style.title}>大华 · 全行业解决方案3D矩阵</div>
                        <div className={style.desc}>大华为各行业提供了全方面的智慧解决方案，其中包含智慧城市、大数据、城市交通、医疗行业、政府部门、等等行业形成了3D产业圈，矩阵时刻，了然一刻!</div>
                        <div className={`flex-center ${style.btn}`} onClick={openPage}>
                            <div>了解详情</div>
                            <img src={require('@/assets/img/arrow.png')} alt="" />
                        </div>
                    </div>
                </div>
            </div> : null
        }

        {
            process.length ?
                <div className={style.introd}>
                    <div className="wrap">
                        <div className={style.h2}><span>活动介绍</span></div>
                        <div className="flex-stretch">
                            <div className={style.aside}>
                                <ul className={style.ul}>
                                    {
                                        process.map((item, index) => {
                                            if (index >= page * 6 && index < (page + 1) * 6)
                                                return <li key={'a' + index} onClick={tab(index)} className={`${style.li} ${index == step ? style.on : ''}`}>
                                                    <div className={style.time}>{item.startTime.substr(0, 10)} <span>{item.startTime.substr(11, 5) + '-' + item.endTime.substr(11, 5)}</span></div>
                                                    <div className={style.name}>{item.content}</div>
                                                </li>
                                        })
                                    }
                                </ul>

                                {
                                    process.length > 6 ?
                                        <div className={`flex ${style.flex}`}>
                                            <div className={`${style.btn} flex-center`} onClick={changePage(-1)}>
                                                <img src={require('@/assets/img/up.png')} alt="" />
                                            </div>
                                            <div className={`${style.btn} flex-center`} onClick={changePage(1)}>
                                                <img src={require('@/assets/img/down.png')} alt="" />
                                            </div>
                                        </div>
                                        : null
                                }
                            </div>
                            <div className={style.section}>
                                <div className={style.img}>
                                    <img src={pimg} alt="" />
                                </div>
                                <div className={style.bot}>
                                    <div className="flex-stretch">
                                        <div style={{ width: '220px' }}>
                                            <div className={style.label}>活动名称 /</div>
                                            <div className={style.cont}>{info.title}</div>
                                        </div>
                                        <div style={{ width: '200px' }}>
                                            <div className={style.label}>活动时间 /</div>
                                            <div className={style.cont}>{info.startTime}</div>
                                        </div>
                                        <div style={{ width: '220px' }}>
                                            <div className={style.label}>活动地点 /</div>
                                            <div className={style.cont}>{info.address}</div>
                                        </div>
                                    </div>
                                    <div className={`flex ${style.info}`}>
                                        <div className={style.label}>活动介绍 /</div>
                                        <div className={style.desc}>{info.remarks}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                : null
        }

        <div className="wrap">
            {
                per.length && per[3].isDel == 0 ? <>
                    <div className={style.h2}><span>活动直播</span></div>
                    <div className={`${style.live}`} id="video"></div>
                </> : null
            }

            {
                video.length ? <>
                    <div className={style.h2}><span>精彩片段</span></div>
                    <div className={style.life}>
                        <div className="flex-stretch">
                            {
                                video[0] ? <div className={`flex-center ${style.left}`} onClick={showVideo(video[0].url)}>
                                    <img src={prefix + video[0].image} />
                                    <img src={require('@/assets/img/play.png')} className={style.play} /> </div> : null
                            }
                            <div className={`flex ${style.right}`} >
                                {
                                    video[1] ? <div className={`flex-center ${style.b1}`} onClick={showVideo(video[1].url)}><img src={prefix + video[1].image} />
                                        <img src={require('@/assets/img/play.png')} className={style.play} /> </div> : null
                                }
                                {
                                    video[2] ? <div className={`flex-center ${style.b1}`} onClick={showVideo(video[2].url)}><img src={prefix + video[2].image} />
                                        <img src={require('@/assets/img/play.png')} className={style.play} /> </div> : null
                                }
                            </div>
                        </div>
                    </div>
                </> : null
            }
            {
                img.length ? <>
                    <div className={style.h2}><span>精彩瞬间</span></div>
                    <div className={style.life}>
                        <div className="flex-stretch">
                            <div className={`flex-stretch ${style.col}`}>
                                <div className={`${style.b1} `}>
                                    <img src={prefix + img[0].image} alt="" />
                                    <div className={style.tit}>{img[0].title}</div>
                                </div>
                                <div className="flex">
                                    {
                                        img[2] ? <div className={` ${style.b2}`}>
                                        <img src={prefix + img[2].image} alt="" />
                                        <div className={style.tit}>{img[2].title}</div>
                                    </div>: null
                                    }
                                    {
                                        img[3] ? <div className={` ${style.b2}`}>
                                        <img src={prefix + img[3].image} alt="" />
                                        <div className={style.tit}>{img[3].title}</div>
                                    </div> : null
                                    }
                                </div>
                            </div>
                            <div className={`flex-stretch ${style.col}`}>
                                {
                                    img[1] ? <div className={`${style.b1} `}>
                                    <img src={prefix + img[1].image} alt="" />
                                    <div className={style.tit}>{img[1].title}</div>
                                </div>: null
                                }
                                <div className="flex">
                                    {
                                        img[4] ? <div className={` ${style.b2}`}>
                                        <img src={prefix + img[4].image} alt="" />
                                        <div className={style.tit}>{img[4].title}</div>
                                    </div>: null
                                    }
                                    {
                                        img[5] ? 
                                        <div className={` ${style.b2}`}>
                                            <img src={prefix + img[5].image} alt="" />
                                            <div className={style.tit}>{img[5].title}</div>
                                        </div>
                                        : null
                                    }
                                </div>
                            </div>
                        </div>

                        <div className={style.more} onClick={link('/life.html')}>更多图片</div>
                    </div></> : null
            }

        </div>
        {
            news.length ?
                <div className={style.news}>
                    <div className="wrap">
                        <div className={style.h2}><span>资讯动态</span></div>
                        <div className="flex-stretch">
                            <div className={style.aside}>
                                <div className={`flex-center ${style.img}`}>
                                    <img src={prefix + news[0].image} alt="" />
                                </div>

                                <div className={style.box} onClick={link(`/news/detail.html?id=${news[0].id}`)}>
                                    <div className={style.name}>{news[0].title}</div>
                                    <div className={style.desc}>{news[0].introduction}</div>
                                </div>
                            </div>

                            <div className={`flex-start ${style.section}`}>
                                {
                                    news.slice(1).map((item, index) =>
                                        <div className={`flex ${style.item}`} key={index} onClick={link(`/news/detail.html?id=${item.id}`)}>
                                            <div className={style.box}>
                                                <div className={style.name}>{item.title}</div>
                                                <div className={style.desc}>{item.introduction}</div>
                                            </div>
                                            <div className={style.time}>
                                                <div className={style.date}>{item.publishTime.slice(8, 10)}</div>
                                                <div className={style.month} >{item.publishTime.slice(0, 7)}</div>
                                            </div>
                                        </div>
                                    )
                                }
                            </div>
                        </div>
                        <div className={style.more} onClick={link('/news.html')}>更多动态</div>
                    </div>
                </div> : null
        }
        {
            partner.length ?
                <div className="wrap">
                    <div className={style.h2}><span>合作伙伴</span></div>
                    <div className="flex-wrap-start">
                        {partner.map((item, i) => <div key={i} className={`flex-center ${style.partner}`}>
                            <img src={prefix + item.image} alt="" />
                        </div>)}
                    </div>
                </div>
                : null
        }
        {
            mask ? <div className="mask flex-center" onClick={() => setMask('')}>
                <video src={mask} controls autoPlay className={style.video} onClick={e => e.stopPropagation()} ></video>
            </div>
                : null
        }
        <Foot />
    </>
}

export default IndexPage
